<template>
  <div class="image-viewer" v-viewer :class="[isMobile_new && 'image-viewer-mobile']">
    <div class="image-viewer-wrapper" v-for="(item,index) in viewerList" :key="index">
        <img :src="item">
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  computed,
  getCurrentInstance
} from 'vue' 

import { useRouter } from "vue-router"
const router = useRouter();

const emit = defineEmits([""])
const props = defineProps({
  viewerList:{
    type:Array,
    default:()=>{
      return []
    }
  }
})
const isMobile_new = computed(()=>{
  let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
  return flag;
})
</script>
<style lang="scss" scoped>
.image-viewer{
    width: 100%;
    height: calc(100vh - 200px);
    background-color: #333;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    .image-viewer-wrapper{
        cursor: pointer;
        width: calc(33% - 20px);
        display: flex;
        align-items: center;
        justify-content: center;
        img{
            max-width: 100%;            
        }
    }
}
.image-viewer-mobile{
    height: calc(100vh - 3.125rem);
}
</style>